<template>
  <div ref="echart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    isAxisChart: {
      type: Boolean,
      default: true
    },
    charData: {
      type: Object,
      default () {
        return {
          xData: [],
          series: []
        }
      }
    }
  },
  data () {
    return {
      axisOption: {
        legend: {
          // 图例文字颜色
          textStyle: {
            color: '#333'
          }
        },
        grid: {
          // left: '20%'
        },
        // 提示框
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category', // 类目轴
          data: [],
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          },
          axisLabel: {
            interval: 0,
            color: '#333'
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#17b3a3'
              }
            }
          }
        ],
        color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3'],
        series: []
      },
      normalOption: {
        legend: {},
        tooltip: {
          trigger: 'item'
        },
        color: [
          '#0f78f4',
          '#dd536b',
          '#9462e5',
          '#a6a6a6',
          '#e1bb22',
          '#39c362',
          '#3ed1cf'
        ],
        series: []
      },
      echart: null
    }
  },
  computed: {
    // 监听传递进来的isAxisChart，没有传递默认为true
    options () {
      // 如果是饼图 不需要xAxis配置   使用normalOption
      return this.isAxisChart ? this.axisOption : this.normalOption
    }
  },
  methods: {
    // 初始化chart
    initChart () {
      // 给echart添加数据的函数
      this.initChartData()
      // 如果echart为真代表不是第一次，只需设置配置
      // 否则需要先找到实例 然后调用echarts的init的方法创建canvas画板，再去配置配置项
      if (this.echart) {
        this.echart.setOption(this.options)
      } else {
        this.echart = echarts.init(this.$refs.echart)
        this.echart.setOption(this.options)
      }
    },
    // 判断图表类型 然后给echart添加数据
    initChartData () {
      if (this.isAxisChart) {
        this.axisOption.xAxis.data = this.charData.xData
        this.axisOption.series = this.charData.series
      } else {
        this.normalOption.series = this.charData.series
      }
    }
  },
  watch: {
    // 监听传递进来的数据  因为第一次就需要执行init函数，所以需要deep：true
    charData: {
      handler: function () {
        this.initChart()
      },
      deep: true
    }
  }
}
</script>
